<template>
    <div class="AddPatient">
        <div>
            <h2>预约设置</h2>
            <div class="operatingBox">
                <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
            </div>
            <div class="formBox">
                <el-form size="mini" label-width="500px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <el-form-item slot="label">
                                    <span class="labelText ">预约人</span>
                                    <el-input v-model="appointmentHolder" :disabled="true">
                                        <template #suffix>
                                            <el-button type="success" size="mini" class="add" @click="addRecipient" v-if="isShow">+新增</el-button>
                                        </template>
                                    </el-input>
                                    <span class="labelText warn" v-if="holderWarn">请添加预约人！</span>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">可预约天数</span>
                                        <el-input v-model="bookableDays"></el-input>
                                        <span class="labelText warn" v-if="daysWarn">请添加预约天数！</span>
                                    </span>
                                </el-form-item>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <el-form-item slot="label">
                                    <span class="labelText">人数限制</span>
                                    <el-input v-model="numberLimit">

                                    </el-input>
                                    <span class="labelText warn" v-if="limitWarn">请添加人数限制！</span>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">可预约</span>
                                    </span>
                                    <el-checkbox v-model="checked"></el-checkbox>
                                </el-form-item>
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>
                <div class="line"></div>

                <div class="btnBox">
                    <el-button type="primary" size="small" @click="preservation">保存</el-button>
                    <el-button type="info" size="small" @click="goBack">取消</el-button>
                </div>
            </div>
        </div>
</div>
</template>

<script>


export default {
    name: 'AddPatient',

    data() {
        return {
            appointmentHolder:"",
            bookableDays:"",
            numberLimit:"",
            checked:false,
            isShow:false,
            userId:"",
            id:"",
            holderWarn:false,
            limitWarn:false,
            daysWarn:false
        };
    },
    beforeMount(){
        console.log("ccc",this.$route.query)
        this.appointmentHolder = this.$route.query.appointmentHolder,
        this.bookableDays = this.$route.query.bookableDays,
        this.numberLimit = this.$route.query.numberLimit
        this.userId=this.$route.query.userId
        this.id=this.$route.query.id
        if(this.$route.query.status == "可预约"){
            this.checked = true
        }else{
            this.checked = false
        }
        
        if(this.$route.query.appointmentHolder === undefined){
            this.isShow = true
        }

    },

    methods:{
        goBack(){
            this.$router.push("/appointment/appSetting")
        },
        addRecipient(){
            this.$router.push("/appointment/addRecipient")
        },
        //保存
        preservation(){
            if(this.appointmentHolder === undefined){
                this.holderWarn = true
            }else{
                this.holderWarn = false
            }
            if(this.bookableDays === undefined){
                this.daysWarn = true
            }else{
                this.daysWarn = false
            }
            if(this.numberLimit === undefined){
                this.limitWarn = true
            }else{
                this.limitWarn = false
            }
            console.log(this.bookableDays)
            if(this.$route.query.bookableDays === undefined){
                // 新增
                console.log("新增")

                if(this.appointmentHolder !== undefined && 
                   this.bookableDays !== undefined &&
                   this.numberLimit !== undefined){
                    this.$api.appointment.addAppointmentUser({
                    day:this.bookableDays,
                    userId:this.userId,
                    numberLimit:this.numberLimit,
                    status:this.checked ===  true? 0 : 1,
                }).then((res) => {
                    console.log(res)
                    this.$router.push("/appointment/appSetting")
                })
                   }
                
            }
            else{
                console.log("修改")
                console.log(this.$route.query)
                if(this.appointmentHolder !== undefined && 
                   this.bookableDays !== undefined &&
                   this.numberLimit !== undefined){
                    this.$api.appointment.updateAppointmentUser({
                    day:this.bookableDays,
                    id:this.id,
                    numberLimit:this.numberLimit,
                    status:this.checked === true? 0 : 1,
                }).then((res) => {
                    console.log(res)
                    this.$router.push("/appointment/appSetting")
                })
                   }
            }
        }
    },

    


};
</script>

<style lang="less" scoped>
h2 {
    margin: 15px;

}

.operatingBox {
    background-color: white;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}

.selectBox {
    display: flex;
    flex-direction: column;
}

.line {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
    border-bottom: 2px solid rgb(117, 116, 116);
}

.btnBox {
    margin-top: 20px;
    margin-bottom: 20px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.add {
    padding-bottom: 3px;
    padding-top: 3px;
}
.warn{
    color: red;
}
</style>